<template>
  <div class="report-form">
    <!-- 工作内容列表 -->
    <div class="work-contents">
      <h4>工作内容列表</h4>
      <el-table :data="reportItems" border stripe class="table-content">
        <!-- 时间范围 -->
        <el-table-column prop="timeRange" label="时间范围" width="180" />
        <!-- 工时 -->
        <el-table-column prop="workHours" label="工时(h)" width="100" />
        <!-- 工作内容文本 -->
        <el-table-column prop="workContent" label="工作内容" />
        <!-- 交付物描述文本 -->
        <el-table-column prop="deliverables" label="交付物描述" />
        <!-- 附件下载链接 -->
        <el-table-column label="附件" width="200">
          <template #default="scope">
            <a
              v-if="isValidUrl(scope.row.attachmentUrl)"
              :href="scope.row.attachmentUrl"
              target="_blank"
              download
              class="download-link"
            >
              {{ scope.row.attachmentFilename || "点击下载" }}
            </a>
            <span v-else>无</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import service from "@/utils/request";


export default {
  name: "ReportForm",
  data() {
    return {
      // 当前日报基本信息
      reportData: {
        id: null,
        workDate: new Date(),
        startTime: "",
        endTime: "",
        workContent: "",
        deliverables: ""
      },
      // 多条工作内容:
      // each item => {
      //   timeRange, hours, content, deliverables,
      //   attachmentUrl, attachmentFilename
      // }
      reportItems: [],
      // 时间选择器范围
      timeOptions: {
        selectableRange: "08:00:00 - 18:00:00"
      },
      // 是否编辑工作内容
      isEditingWorkItem: false,
      // 正在编辑的workItem索引
      editingIndex: null,

      // 临时存放“已上传”但未写进workItem的 附件信息
      attachmentUrl: "",
      attachmentFilename: ""
    };
  },
  computed: {
    // 判断是详情页
    isEditPage() {
      return this.$route.path.startsWith("/report/detail");
    }
  },
  mounted() {
    // 如果是详情页, 加载已有日报
    if (this.isEditPage) {
      this.loadDailyReport();
    }
  },
  methods: {
    /**
     * 加载单条日报
     * GET /reports/getone/:id
     */
    async loadDailyReport() {
      const { id } = this.$route.params;
      if (!id) return;
      try {
        const { data } = await service.get(`/reports/getone/${id}`);
        console.log(data);
        this.reportData.id = data.data.id;
        this.reportData.workDate = data.data.workDate;
        // 后端返回的 workContent
        this.reportItems = data.data.reportItems || [];
      } catch (err) {
        this.$message.error("加载日报详情失败");
      }
    },

    /**
     * 重置输入区
     */
    resetWorkItemFields() {
      this.reportData.startTime = "";
      this.reportData.endTime = "";
      this.reportData.workContent = "";
      this.reportData.deliverables = "";
      this.attachmentUrl = "";
      this.attachmentFilename = "";
      this.isEditingWorkItem = false;
      this.editingIndex = null;
    },

    /**
     * 计算工时(如08:30->12:00 =>3.5h)
     */
    calculateHours(startTime, endTime) {
      const start = new Date(`1970-01-01T${startTime}:00`);
      const end = new Date(`1970-01-01T${endTime}:00`);
      const diff = (end - start) / (1000 * 60 * 60);
      return diff > 0 ? diff : 0;
    },
    /**
     * 判断给定的 URL 是否有效
     */
    isValidUrl(url) {
      try {
        // 使用 URL 构造函数来验证 URL 格式
        const parsedUrl = new URL(url);
        return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:';
      } catch (e) {
        // 如果 URL 格式不正确，抛出错误，返回 false
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.report-form {
  padding: 20px;
  background: #f9f9f9;

  .form-container {
    margin-bottom: 20px;
  }

  .quick-actions {
    margin: 0 0 10px 50px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .time-range-container {
    display: flex;
    align-items: center;
    .time-range {
      display: flex;
      align-items: center;
      padding-right: 10px;
      .time-separator {
        margin: 0 5px;
      }
    }
    .quick-time-buttons {
      display: flex;
      gap: 5px;
    }
  }

  .deliverables {
    display: flex;
    align-items: center;
    gap: 10px;
    el-input {
      width: 80%;
    }
  }

  .work-contents {
    margin-top: 20px;
    .table-content {
      width: 100%;
      .download-link {
        color: #409eff;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .actions {
    margin-top: 20px;
    text-align: center;
    button + button {
      margin-left: 10px;
    }
  }
}
</style>
